<template>
	<view class="search">
		<view class="searchbox">
			<image src="@/static/search.png" mode="widthFix"></image>
			<input type="text" placeholder="输入关键字" v-model="keyword" confirm-type="search" @confirm="confirm"/>
		</view>
		<view class="newsList">
			<view class="newsListBox" v-for="(item,index) in list" :key="index" @click="changeRouter(item.id)">
				<view class="newsListBoxLeft" v-if="((item.img))">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="newsListBoxRight">
					<view class="title">{{item.title}}</view>
					<view class="msg">
						<view><image src="@/static/time.png" mode="widthFix"></image>{{item.createtime}}</view>
						<text>阅读量:{{item.read}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this
	export default {
		data() {
			return {
				keyword:"",
				list:[],
				last_page:1,
				page:1
			};
		},
		//分享
		onShareAppMessage(){},
		//分享朋友圈
		onShareTimeline(){},
		onPullDownRefresh() {
			_this.page = 1
			_this.search()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom(){
			if(_this.last_page>_this.page){
				_this.page++
				_this.search()
			}else{
				uni.showToast({
					icon:'none',
					title: '已经到底~~',
					duration: 2000
				});
			}
		},
		onLoad() {
			_this = this
		},
		methods:{
			confirm(){
				_this.page = 0
				_this.search()
			},
			search:async function(){
				if(_this.keyword==''){
					_this.list = []
					return false
				}
				await _this.$api.search({'keyword':_this.keyword,'page':_this.page},res=>{
					_this.last_page = res.data.last_page
					res.data.list.forEach((item, index) => {
						item.createtime = _this.$util.timeToDate(item.createtime)
					});
					_this.list = res.data.list
				})
			},
			changeRouter(id){
				uni.navigateTo({
					url: '/pages/library/library?id='+id,
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
		.searchbox{
			background-color: #fff;
			border-radius: 84rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			gap: 0 24rpx;
			align-items: center;
			height: 84rpx;
			image{
				width: 42rpx;
			}
			input{
				flex: 1 0 10%;
				font-size: 32rpx;
			}
		}
		.newsList{
			.newsListBox{
				margin-top: 24rpx;
				padding: 24rpx;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				gap: 0 24rpx;
				background-color: #fff;
				.newsListBoxLeft{
					image{
						width: 260rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}
				}
				.newsListBoxRight{
					flex: 1 0 10%;
					.title{
					  margin-bottom: 24rpx;
					  width: 360rpx;
					  white-space: nowrap; /* 禁止文本换行 */
					  overflow: hidden; /* 隐藏超出范围的内容 */
					  text-overflow: ellipsis; /* 使用省略号 */
					}
					.msg{
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;
						color: #9B9B9B;
						view{
							display: flex;
							align-items: center;
							gap: 0 12rpx;
						}
						image{
							width: 32rpx;
						}
					}
				}
			}
		}
	}
</style>
